<template>
    <div>
        <!-- 三级分类 -->
        <Category :scene=scene></Category>
        <el-card style="margin: 10px 0;">
            <div v-show="scene==0">
                <el-button @click="addSpu" type="primary" icon="Plus" :disabled="categoryStore.c3Id?false:true">添加SPU</el-button>
                <el-table style="margin: 10px 0;" border :data="records">
                    <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
                    <el-table-column label="SPU名称" prop="spuName"></el-table-column>
                    <el-table-column label="SPU描述" prop="description" show-overflow-tooltip></el-table-column>
                    <el-table-column label="SPU操作">
                        <template #="{row,$index}">
                            <el-button type="primary" size="small" icon="Plus" title="添加SKU" @click="addSku(row)"></el-button>
                            <el-button type="primary" size="small" icon="Edit" title="修改SPU" @click="updateSpu(row)"></el-button>
                            <el-button type="primary" size="small" icon="View" title="查看SKU" @click="findSku(row)"></el-button>
                            <el-popconfirm :title="`你确定删除${row.spuName}`" width="200px" @confirm="deleteSpu(row)">
                                <template #reference>
                                <el-button type="primary" size="small" icon="Delete" title="删除SPU"></el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <el-pagination
                    v-model:current-page="pageNo"
                    v-model:page-size="pageSize"
                    :page-sizes="[3, 5, 7, 9]"
                    :background="true"
                    layout=" prev, pager, next, jumper,-> ,sizes, total,"
                    :total="total"
                    @current-change="getHasSpu"
                    @size-change="changeSize"
                />
            </div>
            <!-- 添加|修改SPU -->
            <spuForm v-show="scene==1" @changeScene="changeScene" ref="SpuForm"></spuForm>
            <!-- 添加SKU -->
            <skuForm v-show="scene==2" @changeScene="changeScene" ref="sku"></skuForm>
            <!-- 对话框展示已有的SKU数据 -->
            <el-dialog title="SKU列表" v-model="show">
                <el-table border :data="skuArr">
                    <el-table-column label="sku名字" prop="skuName"></el-table-column>
                    <el-table-column label="sku价格" prop="price"></el-table-column>
                    <el-table-column label="sku重量" prop="weight"></el-table-column>
                    <el-table-column label="sku图片">
                        <template #="{row,$index}">
                            <img :src="row.skuDefaultImg" style="width: 100px; height: 100px;">
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </el-card>
    </div>
</template>
<script setup lang="ts">
import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue';
import { reqHasSpu, reqRemoveSpu, reqSkuList } from '@/api/product/spu';
import { HasSpuResponseData,Recodes, SkuData } from '@/api/product/spu/type';
import { SpuData } from '@/api/product/spu/type';
//引入分类的仓库
import useCategoryStore from '@/store/modules/category';
//引入相应的子组件
import spuForm from './spuForm.vue';
import skuForm from './skuForm.vue';
import { ElMessage, Notify } from 'element-plus';
import { reqRemoveAttr } from '@/api/product/attr';
let pageNo=ref<number>(1);
let pageSize=ref<number>(3);
let scene=ref<number>(0)//0:显示已有 1：添加或修改SPU 2：添加SKU结构
let categoryStore=useCategoryStore();
//存储已有的spu数据
let records=ref<Recodes>([]);
//存储已有的SPU的总个数
let total=ref<number>(0);
//获取子组件实例
let SpuForm=ref<any>();
let sku=ref<any>();
//存储全部的SKU数据
let skuArr=ref<SkuData[]>([])

let show=ref<boolean>(false);














//监听三级分类ID变化
watch(()=>categoryStore.c3Id,()=>{
    if(!categoryStore.c3Id){
        return;
    }
    getHasSpu();
})

//获取三级分类下已有的SPU
const getHasSpu=async (page=1)=>{
    pageNo.value=page;
    let result: HasSpuResponseData= await reqHasSpu(pageNo.value,pageSize.value,categoryStore.c3Id);
    console.log("SPU数据")
    console.log(result);
    if(result.code==200){
        records.value=result.data.records;
        total.value=result.data.total;
    }
}


const changeSize=()=>{
    getHasSpu();
}

//添加SPU
const addSpu=()=>{
    //切换场景1
    scene.value=1;
    //点击添加SPU按钮，调用子组件的方法初始化数据
    SpuForm.value.initAddSpu(categoryStore.c3Id);
}

//子组件spuForm绑定的自定义事件子组件通知父组件切换场景
const changeScene=(obj:any)=>{
    //子组件Spuform点击取消更换场景
    scene.value=obj.flag;
    if(obj.params=='update'){
        getHasSpu(pageNo.value);
    }
    else{
        getHasSpu();
    }
    
}

//修改SPU
const updateSpu=(row:SpuData)=>{
    //调用子组件实例的方法获取完整的已有的SPU的数据
    SpuForm.value.initHasSpuData(row);
    scene.value=1;
}

//添加sku
const addSku=(row:SpuData)=>{
    //点击sku按钮切换场景为2
    scene.value=2
    sku.value.initSkuDate(categoryStore.c1Id,categoryStore.c2Id,row);
}

//查看SKU列表数据
const findSku=async (row:SpuData)=>{
    let result= await reqSkuList(row.id as number);
    console.log("查看SKU列表");
    console.log(result);
    if(result.code==200){
        skuArr.value=result.data;
        //对话框显示出来
        show.value=true;
    }
}

//删除已有的SPU按钮的回调
const deleteSpu=async (row:SpuData)=>{
    let result= await reqRemoveSpu(row.id as number);
    if(result.code==200){
        ElMessage.success("删除成功");
    }
    else{
        ElMessage.error("删除失败");
    }
    getHasSpu(records.value.length>1?pageNo.value:pageNo.value-1);
}

onBeforeUnmount(()=>{
    categoryStore.$reset();
})





</script>
<style scoped>
</style>